//JS入口文件
 import Vue from 'vue'
 import app from './App.vue'

//导入路由
import VueRouter from 'vue-router'
Vue.use( VueRouter)

import router from './router.js'


 //导入mint-ui 全部组件
 import MintUI from 'mint-ui'
 import 'mint-ui/lib/style.css'
 Vue.use(MintUI)
// Vue.use(Lazyload);


//安装图片预览插件 
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//导入mui样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

//导入vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)

//设置请求的根路径，必须写在导入VueResource后面
Vue.http.options.root = 'http://www.liulongbin.top:3005'


//导入时间插件
import moment from 'moment'


//定义全局过滤器
Vue.filter('dateFormat',function(dataStr,pattern='YYYY-MM-DD HH:mm:ss'){
    return  moment(dataStr).format(pattern)
})


//全局设置post时候表单数据格式组织形式  application/x-www-from-urlencoded
Vue.http.options.emulateJSON = true


//导入vuex
import Vuex from 'vuex'
//注册vuex
Vue.use(Vuex)


// 每次刚进入 网站，肯定会 调用 main.js 在刚调用的时候，先从本地存储中，把 购物车的数据读出来，放到 store 中
var car = JSON.parse(localStorage.getItem('car') || '[]')

var store = new Vuex.Store({
    state:{
        //this.$store.state.**
        car:car      // 将 购物车中的商品的数据，用一个数组存储起来，在 car 数组中，存储一些商品的对象， 咱们可以暂时将这个商品对象，设计成这个样子   
                    // { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false  }
    },
    mutations:{
        //this.$store.commit('方法名称','唯一参数')
        addToCar(state,goodsinfo){
            // 点击加入购物车，把商品信息，保存到 store 中的 car 上
            // 分析：
            // 1. 如果购物车中，之前就已经有这个对应的商品了，那么，只需要更新数量
            // 2. 如果没有，则直接把 商品数据，push 到 car 中即可

            // 假设 在购物车中，没有找到对应的商品
            var flag = false

            state.car.some(item => {
              if (item.id == goodsinfo.id) {
                item.count += parseInt(goodsinfo.count)
                flag = true
                return true
              }
            })
      
            // 如果最终，循环完毕，得到的 flag 还是 false，则把商品数据直接 push 到 购物车中
            if (!flag) {
              state.car.push(goodsinfo)
            }

            // 当修改完商品的数量，把最新的购物车数据，保存到 本地存储中
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        updateGoodsInfo(state, goodsinfo) {
          state.car.some(item => {
            if (item.id == goodsinfo.id) {
              item.count = parseInt(goodsinfo.count)
            }
          })
          // 把最新的 所有购物车商品的状态保存到 store 中去
          localStorage.setItem('car', JSON.stringify(state.car))
        },
        removeFromCar(state,id){
          //根据id,从store的购物车中删除对应的商品数据
          state.car.some((item,i) =>{
            if(item.id == id){
              state.car.splice(i,1)
              return true
            }
          })

          // 把最新的 所有购物车商品的状态保存到 store 中去
          localStorage.setItem('car', JSON.stringify(state.car))
        },
        updateGoodsSelected(state, info) {
          state.car.some(item => {
            if (item.id == info.id) {
              item.selected = info.selected
            }
          })
          // 把最新的 所有购物车商品的状态保存到 store 中去
          localStorage.setItem('car', JSON.stringify(state.car))
        }
    },
    getters:{
        //this.$store.getters.**
        // 相当于 计算属性，也相当于 filters
        getAllCount(state) {
            var c = 0;
            state.car.forEach(item => {
              c += item.count
              //console.log(c)
            })
            return c
        },
        getGoodsCount(state){
          var o ={}
          state.car.forEach(item =>{
            o[item.id] = item.count
          })
          return o
        },
        getGoodsSelected(state) {
          var o = {}
          state.car.forEach(item => {
            o[item.id] = item.selected
          })
          return o
        },
        getGoodsCountAndAmount(state) {
          var o = {
            count: 0, // 勾选的数量
            amount: 0 // 勾选的总价
          }
          state.car.forEach(item => {
            if (item.selected) {
              o.count += item.count
              o.amount += item.price * item.count
            }
          })
          return o
        }
    }
})


 var vm = new Vue({
     el:'#app',
     data:{ 

     },
     render:c => c(app),
     router,
     store,
 })